<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="项目管理">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="projectModal = true">创建项目</a-button>
      </div>
      <a-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data-source="dataList"
        :alert="true"
        showPagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="host" slot-scope="host">
          <a-tag
            v-for="tag in host.split(',')"
            :key="tag"
            color="green"
          >
            {{ tag }}
          </a-tag>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleDelete(record)">删 除</a>
          </template>
        </span>
      </a-table>
    </a-card>
    <a-modal v-model="projectModal" title="创建项目" ok-text="确认" cancel-text="取消" @ok="submitProject">
      <a-input placeholder="项目名称" v-model="projectName"/>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getProjectList, saveProject } from '@/api/logstash_project'

const columns = [
  {
    title: '#',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '项目名称',
    dataIndex: 'projectName'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '创建用户',
    dataIndex: 'submitUserName',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'ProjectList',
  data () {
    this.columns = columns
    return {
      dataList: [],
      currProjectId: null,
      projectName: "",
      projectModal: false
    }
  },
  methods: {
    loadData () {
      const me = this
      getProjectList().then(res => {
        if (res.code === 200) {
          me.dataList = res.data
        }
      })
    },
    submitProject () {
      saveProject({
        id: this.currProjectId,
        projectName: this.projectName
      }).then(res => {
        if(res.code == 200){
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
        this.projectModal = false;
        this.loadData()
      })
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>
